<template>
    <div class="marquee">
      <div class="text" :style="marqueeStyle">
        {{ displayedText }} {{ trailingDots }}
      </div>
    </div>
  </template>
   
  <script>
  export default {
    props: {
      text: String,
      duration: {
        type: Number,
        default: 5, // 默认5秒
      },
    },
    data() {
      return {
        animationStartTime: 0,
      };
    },
    computed: {
      marqueeStyle() {
        return {
          'animation-duration': `${this.duration}s`,
          'animation-play-state': this.isAnimating ? '' : 'paused',
        };
      },
      isAnimating() {
        return this.animationStartTime > 0;
      },
      displayedText() {
        if (this.isAnimating) {
          const elapsed = Date.now() - this.animationStartTime;
          const scrollDistance = elapsed * 100 / this.duration; // 单位：像素
          return this.text.substring(0, this.text.length - scrollDistance);
        }
        return this.text;
      },
      trailingDots() {
        return '.'.repeat(20); // 假设最长可能需要20个点来填充文本宽度
      },
    },
    mounted() {
      this.startAnimation();
    },
    methods: {
      startAnimation() {
        this.animationStartTime = Date.now();
      },
    },
  };
  </script>
   
  <style scoped>
  .marquee {
    overflow: hidden;
    white-space: nowrap;
  }
   
  .text {
    display: inline-block;
    animation-name: marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
   
  @keyframes marquee {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  </style>